<!-- src/view/GuideProfile.vue -->
<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <div class="header-container">
          <!-- Logo和标题 -->
          <el-menu :default-active="activeIndex"
                   class="el-menu-demo"
                   mode="horizontal"
                   :ellipsis="false"
                   background-color="#FFFFFF"
                   text-color="#606266"
                   active-text-color="#409eff"
                   @select="handleSelect">

            <el-menu-item index="0" class="logo-menu-item">
              <img style="height: 80%" src="@/assets/dz.png" alt="颜途" />
              <span class="header-title">"颜途"地陪旅游服务平台</span>
            </el-menu-item>

            <div class="flex-grow" />

            <el-sub-menu index="1">
              <template #title>
                <el-icon><stamp /></el-icon>
                <span class="user-name">{{ loginGuide ? loginGuide.username : '未登录' }}</span>
              </template>
              <el-menu-item index="logout" class="logout-item">
                <el-icon><SwitchButton /></el-icon>
                <span>退出登录</span>
              </el-menu-item>
            </el-sub-menu>
          </el-menu>
        </div>
      </el-header>

      <el-container style="height: calc(100vh - 80px);">
        <el-aside :width="isCollapse ? '64px' : '200px'">

          <!-- 折叠按钮区 -->
          <div class="aside-header">
            <div class="aside-title">地陪页面</div>
            <el-icon @click="isCollapse=!isCollapse" class="collapse-icon">
              <Expand v-if="isCollapse" />
              <Fold v-else />
            </el-icon>
          </div>

          <!-- 菜单区 -->
          <el-menu active-text-color="#409eff"
                   background-color="#f8fbff"
                   class="el-menu-vertical-demo"
                   :default-active="$route.path"
                   text-color="#333"
                   :collapse="isCollapse"
                   @select="handleMenu"
                   style="height: calc(100% - 60px);"
                   :unique-opened="true">
            <!-- 地陪菜单 -->
            <el-menu-item index="/guideMain" class="menu-item">
              <el-icon>
                <House />
              </el-icon>
              <span v-if="!isCollapse" class="menu-text">主页</span>
            </el-menu-item>

            <el-sub-menu index="1" class="sub-menu">
              <template #title>
                <el-icon>
                  <User />
                </el-icon>
                <span v-if="!isCollapse" class="menu-text">个人信息</span>
              </template>
              <el-menu-item index="/guide/profile" class="sub-menu-item">
                <span v-if="!isCollapse" class="menu-text">个人信息</span>
              </el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="2" class="sub-menu">
              <template #title>
                <el-icon>
                  <DataAnalysis />
                </el-icon>
                <span v-if="!isCollapse" class="menu-text">工作信息</span>
              </template>
              <el-menu-item index="/guide/work" class="sub-menu-item">
                <span v-if="!isCollapse" class="menu-text">工作信息</span>
              </el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-aside>

        <el-main>
          <!-- 子页面内容 -->
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import router from '@/router'
import { Stamp, SwitchButton, Expand, Fold, User, DataAnalysis } from "@element-plus/icons-vue"
import login_api from "@/api/login_api.js";

const activeIndex = ref('1')
const isCollapse = ref(false)

// 取出当前登录用户的信息
const loginGuide = ref({
  username: "地陪用户",
})

getLogin();
async function getLogin(){
  let token = localStorage.getItem('token');
  if (! token){
    router.push('/login');
  }

  const res=await login_api.loginInfo();
  console.log(res);
  loginGuide.value.username= res.username || '未登录';
}
onMounted(async ()=>{
  await getLogin();
})

// 用户下拉菜单的点击
function handleSelect(key, keyPath) {
  if (key == 'logout') {
    // 用户退出
    logout()
  }
}

// 左侧菜单动作
function handleMenu(key) {
  if (key) {
    router.push(key)
  }
}

// 退出
function logout() {
  //清除Token
  localStorage.removeItem('token')
  localStorage.removeItem('user')
  // 跳转到登录
  router.push('/login')
}
</script>

<style>
.flex-grow {
  flex-grow: 1;
}

.common-layout,
.el-container {
  height: 100%;
}

.el-header {
  --el-header-padding: 0;
  --el-header-height: 80px;
  box-sizing: border-box;
  flex-shrink: 0;
  height: var(--el-header-height);
  padding: var(--el-header-padding);
  box-shadow: 0 2px 12px 0 rgba(64, 158, 255, 0.1);
}

.el-menu--horizontal {
  height: 80px;
  border: none;
}

.logo-menu-item {
  display: flex;
  align-items: center;
}

.header-title {
  padding-left: 20px;
  font-size: 22px;
  font-weight: 600;
  color: #409eff;
  letter-spacing: 1px;
  text-shadow: 0 1px 2px rgba(64, 158, 255, 0.2);
}

.user-name {
  font-weight: 500;
  letter-spacing: 0.5px;
}

.logout-item {
  font-weight: 500;
}

.el-aside {
  background-color: #f8fbff;
  border-right: 1px solid #e4e7ed;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.el-main {
  padding: 0px;
  background: linear-gradient(135deg, #e6f7ff 0%, #f0f9ff 100%);
  overflow: auto;
}

.el-menu {
  border-width: 0;
}

.sub-menu-item {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.5px;
  border-radius: 6px;
  margin: 4px 8px;
  transition: all 0.3s ease;
}

.sub-menu-item:hover {
  background-color: rgba(64, 158, 255, 0.1) !important;
}

.sub-menu :deep(.el-sub-menu__title) {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.5px;
  border-radius: 6px;
  margin: 4px 8px;
  transition: all 0.3s ease;
}

.sub-menu :deep(.el-sub-menu__title:hover) {
  background-color: rgba(64, 158, 255, 0.1) !important;
}

.menu-text {
  margin-left: 10px;
}

.aside-header {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background: linear-gradient(135deg, #e6f7ff 0%, #d1e7ff 100%);
  border-bottom: 1px solid #d1e1ff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.aside-title {
  font-size: 18px;
  font-weight: 600;
  color: #409eff;
  letter-spacing: 1px;
  text-shadow: 0 1px 1px rgba(64, 158, 255, 0.2);
}

.collapse-icon {
  font-size: 20px;
  color: #409eff;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 8px;
  border-radius: 50%;
}

.collapse-icon:hover {
  transform: scale(1.1);
  background-color: rgba(64, 158, 255, 0.1);
  color: #67c23a;
}

@media (max-width: 768px) {
  .header-title {
    font-size: 18px;
    padding-left: 10px;
  }

  .el-menu--horizontal {
    height: 70px;
  }

  :deep(.el-menu--horizontal > .el-menu-item) {
    height: 70px;
    line-height: 70px;
  }
}
</style>
